<template>
	<view class="container">
		<swiper class="swiper" circular indicator-dots indicator-color="rba(255,255,255,.5)" indicator-active-color="#ffffff" 
			autoplay :interval="2000">
			<swiper-item v-for="(banner, b) in goods.banner_images" :key="b">
				<view class="swiper-item">
					<image :src="domain+banner" mode="aspectFill" class="img"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="goods">
			<view class="name">{{goods.name}}</view>
			<view class="price flex"><text>￥</text>{{goods.price}}</view>
			<view class="divider"><text>详情描述</text></view>
			<view class="detailsHtml" v-html="goods.goods_content"></view>
		</view>
		<button class="primary" @tap="consultBuy()" v-if="is_login && !my_goods">咨询购买</button>
		
		<uni-popup ref="consult" type="bottom" background-color="#fff">
			<view class="consultBox">
				<view class="item">
					手机号：{{mobile}}
					<uni-tag text="点击拨号" type="success" class="tag" size="small" @click="callPhone(mobile)"/>
				</view>
				<view class="item">
					微信号：{{wechat}}
					<uni-tag text="点击复制" type="success" class="tag" size="small" @click="copy(wechat)"/>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import common from '@/static/js/common.js';
	export default {
		data() {
			return {
				domain: getApp().globalData.DOMAIN,
				id: null,
				goods: {},
				mobile: '',
				wechat: '',
				is_login: false,
				my_goods: false
			}
		},
		onLoad(e) {
			this.id = e.id
			if (e.t) {
				this.my_goods = true
			}
		},
		onShow() {
			this.getGoodsInfo()
			let that = this
			if (uni.getStorageSync('token') && uni.getStorageSync('token') != '') {
				that.is_login = true
				common.api({
					method: 'GET',
					url: '/mobile/index/buy',
					data:{id: that.id},
					success: function(res) {
						if (res.code == 0) {
							that.mobile = res.data.mobile
							that.wechat = res.data.wechat
						}
					}
				});
			}
		},
		methods: {
			getGoodsInfo() {
				let that = this;
				common.api({
					method: 'GET',
					url: '/mobile/index/'+(that.my_goods?'userGoodsDetail':'goodsDetail'),
					data:{
						id: that.id
					},
					success: function(res) {
						if (res.code != 0) {
							uni.showToast({ title: res.msg, icon: 'none' });
							return false;
						}
						res.data.banner_images = res.data.banner_images.split(',')
						that.goods = res.data
						that.my_goods = (res.data.user_id==uni.getStorageSync('user_id'))
					},
					error: function () {
						uni.showToast({ title: '数据请求异常', icon: 'none' });
					}
				});
			},
			consultBuy() {
				this.$refs.consult.open()
			},
			callPhone(data) {
				uni.makePhoneCall({
					phoneNumber: data,
					success: () => {}
				});
			},
			copy(data) {
				uni.setClipboardData({
					data: data,
					success: () => {}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.swiper-item {
		height: 100%;
		.img {
			width: 100%;
			height: 100%;
		}
	}
	.goods {
		background-color: #fff;
		padding: 20rpx;
		.name {
			line-height: 50rpx;
			font-size: 35rpx;
			font-weight: bolder;
		}
		.price {
			color: red;
			padding: 16rpx 0;
			font-size: 40rpx;
			align-items: baseline;
			text {
				font-size: 26rpx;
			}
		}
		.detailsHtml {
			padding: 16rpx 0;
			text-align: justify;
			img {
				max-width: 90% !important;
			}
		}
	}
	.consultBox {
		padding: 20rpx 3vw;
		.item {
			padding: 10rpx 0;
			.tag {
				margin-left: 30rpx;
			}
		}
	}
	.primary {
		width: 88vw;
		margin: 50rpx auto;
	}
</style>
